<template>
  <div class="app-container">
    <button class="open-button" @click="showDialog = true">打开弹窗</button>

    <!--<VResizableBox></VResizableBox>-->
    <VDialog
      v-model="showDialog"
      title="测试弹窗"
      @confirm="handleConfirm"
      @cancel="handleCancel"
      :close-on-click-modal="false"
    >
      <div class="dialog-content">
        <p>这是一个可拖动的弹窗</p>
        <p>1. 点击标题栏可以拖动</p>
        <p>2. 右边和底部可以调整大小</p>
        <p>3. 点击全屏按钮可以全屏显示</p>
      </div>

      <!-- 自定义底部按钮 -->
      <!-- <template #footer>
        <button class="v-dialog__cancel" @click="handleCancel">取消</button>
        <button class="v-dialog__confirm" @click="handleConfirm">确认</button>
      </template> -->
    </VDialog>

    <div style="margin-top: 20px;">  </div>
    <button class="open-button"  @click="showFade = !showFade">过渡组件</button>

    <div style="margin-top: 20px;">  </div>
    <button class="open-button"  @click="toggleDark()">暗黑主题</button>

    <VFade :show="showFade">
      <div style="width: 200px;height: 200px;background: pink">123</div>
    </VFade>
    <div class="flex">
      <div class="w-400px box-3d h-400px">
        <header>3D饼图</header>
        <VPie ></VPie>
      </div>
      <div class="mx-40px"></div>
      <div class="w-400px box-3d h-400px ">
        <header>3D柱状图</header>
        <VBar></VBar>
      </div>
    </div>

    <div class="py-20px"></div>
    <div class="w-800px">
      <header>文字滚动</header>
      <!-- 基础用法 -->
      <VTextScroll
          type="default"
          text="默认用法 type=default <a target='_blank' href='https://www.lingchen.kim/art-design-pro/docs/'>点击我 </a>访问官方文档"
      >
        <template #left-icon>
          <div class="i-svg-notice"></div>
        </template>
      </VTextScroll>

      <!-- 使用不同的类型 -->
      <VTextScroll type="success" text="这是一条成功类型的滚动公告" >
         <template #left-icon>
          <div class="i-svg-notice"></div>
        </template>
      </VTextScroll>

      <VTextScroll type="warning" text="这是一条警告类型的滚动公告" >
         <template #left-icon>
          <div class="i-svg-notice"></div>
        </template>
      </VTextScroll>

      <VTextScroll type="danger" text="这是一条危险类型的滚动公告" >
         <template #left-icon>
          <div class="i-svg-notice"></div>
        </template>
      </VTextScroll>

      <VTextScroll type="info" text="这是一条信息类型的滚动公告" >
        <template #left-icon>
          <!--<noticeIcon></noticeIcon>-->
          <div class="i-svg-notice"></div>
        </template>
      </VTextScroll>

      <!-- 自定义速度和方向 -->
      <VTextScroll text="这是一条速度较慢、向右滚动的公告" :speed="30" direction="right" >
        <template #left-icon>
          <div class="i-svg-notice"></div>
        </template>
      </VTextScroll>
    </div>
    <div class="w-300px h-300px test-box"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
// import noticeIcon from './assets/svg/notice.svg'
import { useDark, useToggle } from '@vueuse/core'


const showDialog = ref(false)

const handleConfirm = () => {
  console.log('点击了确定')
  showDialog.value = false
}

const handleCancel = () => {
  console.log('点击了取消')
}

const showFade = ref(false)

const isDark = useDark({
  // selector: 'html',
  // attribute: 'color-scheme',
  // valueDark: 'dark',
  // valueLight: 'light',
  // onChanged: (isDark) => {
  //   console.log(isDark,'====')
  // }
})
console.log(isDark,'===')
const toggleDark = useToggle(isDark)
</script>

<style lang="scss">
* {
  box-sizing: border-box;
}
.app-container {
  padding: 20px;
}

.open-button {
  padding: 8px 20px;
  background: #409eff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.open-button:hover {
  background: #66b1ff;
}

.dialog-content {
  min-height: 100px;
}
[class^="i-svg"] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 1.5em;
  width: 1.5em;
}
.box-3d {
 background: var(--el-fill-color-lighter);
}
.test-box {
  // background-color: $test;
}
</style>